<template>
  <div class="Login">
    <el-row class="tac">
      <cMenu :data="menuConfig" @selectMenu="selectMenu" />
    </el-row>
    <el-row type="flex" style="flex-direction: column; width: 85%">
      <cTopHeader :data="{}"></cTopHeader>


    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
    <el-tab-pane
      v-for="(item, index) in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{item.content}}
    </el-tab-pane>
  </el-tabs>

      <el-row class="main-table" style="width: 100%; height: 100%; flex-direction: column; padding:10px 10px 10px 20px; overflow: scroll;"  type="flex">
        <el-row :span="24" >
          <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 14px; line-height: 20px; height: 35px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ topSecondTitle }}</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 搜索筛选 -->
          <cSearch v-if="!userShow && !echartsShow" :data="searchConfig" ref="query" @dialogEvent="dialogEvent"
            @searchEvent="searchEvent"  @apiEvent="apiEvent"></cSearch>
        </el-row>

        <cUser v-if="userShow" @selectMenu="selectMenu" :data="menuConfig"></cUser>
        <cTable v-if="!userShow && !echartsShow" :tableColumn="viewConfig" :tableData="tableData"
          @dialogEvent="dialogEvent" :paginate="paginate" @searchEvent="searchEvent" ref="table" />
      </el-row>
      <!-- header-top -->
    </el-row>

    <!-- dialog -->
    <el-dialog :title="dialog.label" :visible.sync="editFormVisible" :width="dialog.ifNewTable ? '' : '30%'"
      @click="closeDialog" v-if="editFormVisible">
      <el-form label-width="120px" :model="formModel" :rules="rules" ref="formModel" v-if="!dialog.ifNewTable">
        <el-form-item :label="item.label" :prop="item.key" v-for="(item, index) in dialog.dialogConfig" :key="index"
          v-show="item.showVerfiy ? showVerfiy(item) : item.isShow">


          <template v-if="item.type == 'select' && item.multiple == true">
            <el-select v-model="formModel[item.key]" :placeholder="'请选择' + item.label" multiple filterable
              default-first-option @change="change(item)">
              <el-option :label="optionItem.name" :value="optionItem.value" v-for="(optionItem, index) in item.data"
                :key="index">

              </el-option>
            </el-select>
          </template>

          <template v-else-if="item.type == 'select'">
            <el-select :placeholder="'请选择' + item.label" v-model="formModel[item.key]" @change="change(item)">
              <el-option :label="optionItem.name" :value="optionItem.value" v-for="(optionItem, index) in item.data"
                :key="index">
                <!-- {{ optionItem }} -->
              </el-option>
            </el-select>
          </template>


           <template v-else-if="item.type == 'cascader'">
          <el-cascader
            v-model="formModel[item.key]"
            :options="options"
            :props="item.props"
            @change="change(item)">
            </el-cascader>

            </template>


          <template v-else-if="item.type == 'number'">
            <el-input size="small" v-model="formModel[item.key]" auto-complete="off" :placeholder="'请输入' + item.label"
              @input="change(item)" type="number"></el-input>
          </template>

          <template v-else-if="item.type == 'date'">
            <el-date-picker v-model="formModel[item.key]" type="datetime" placeholder="选择日期时间" align="right"
              :picker-options="pickerOptions" default-time="12:00:00" value-format="timestamp"> </el-date-picker>
          </template>

          <template v-else-if="item.type == 'image'">
            <el-upload v-if="item.isShow" list-type="picture-card" :action="calc_url(item.url.api)"
              :on-success="(response, uploadFile, uploadFiles) => successUpLoad(response, item)"
              :before-remove="file => removeFile(file, item)" :on-preview="handlePictureCardPreview" :limit="item.max"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="75%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </template>
          <template v-else-if="item.type == 'ossVideo'">
            <cOss @ossUpLoadSuccess="ossUpLoadSuccess"></cOss>
          </template>

          <template v-else-if="item.type == 'textarea'">
            <el-input :placeholder="'请输入' + item.label" autosize="true" type="textarea"  v-model="formModel[item.key]" :maxlength="item.max?item.max:30" show-word-limit @input="change(item)">
            </el-input>
          </template>

          <el-input size="small"  v-model="formModel[item.key]" auto-complete="off" :placeholder="'请输入' + item.label"
            @input="change(item)" v-else></el-input>
        </el-form-item>
      </el-form>


      <!-- dialogTable -->
      <!-- 目前这个里面的dialog只是构想部分，可以改成tabs更好,这个版本的触发条件是dialog.ifNewTable为True,最好还是改成tabs的样子更好点 -->
      <el-table size="small" :data="myDialogTableData" highlight-current-row border style="width: 100%; overflow: scroll"
        height="100%" v-if="dialog.ifNewTable">
        <el-table-column align="center" type="index" width="50"> </el-table-column>
        <el-table-column align="center" v-if="item.isShow" sortable :prop="item.key" :label="item.label"
          v-for="(item, index) in dialog.dialogConfig.tableColumn.column" :key="index">
          <template slot-scope="scope">
            <div v-if="item.type == 'date'">
              <div>{{ scope.row[item.key] | timestampToTime }}</div>
            </div>
            <div v-else-if="item.type == 'select'">
              {{ mapName(item, scope.row[item.key]) }}
            </div>
            <div v-else-if="item.type == 'image'"
              style="width: 100%; height: 100%; display: flex; justify-content: center">
              <img :src="$devUrl + '/' + scope.row[item.key]" alt="" srcset="" width="50%" />
            </div>

            <div v-else>
              {{ scope.row[item.key] }}
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column label="操作" min-width="200" align="center"
          v-if="dialog.dialogConfig.tableColumn.btn && tableColumn.btn.length !== 0">
          <template slot-scope="scope">
            
            <el-button :type="item.style" size="mini" @click="dialogEvent(scope.$index, scope.row, item)"
              v-for="(item, index) in dialog.dialogConfig.tableColumn.btn" :key="index">{{ item.label }}</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <div slot="footer" class="dialog-footer" v-if="!dialog.ifNewTable">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入公有组件
import cMenu from '@/components/Menu'
import cTable from '@/components/Table'
import cSearch from '@/components/Search'
import cTopHeader from '@/components/TopHeader'
import cUser from '@/components/User/userIndex.vue'
import cOss from '@/components/OSS'

// 系统管理员权限
import sysConfig from '@/systemConfig/viewConfig/sysConfig'
import sysMenu from '@/systemConfig/sysMenuConfig'

import cloneDeep from 'lodash/cloneDeep';



export default {
  name: 'vLogin',
  // 注册组件

  components: {
    cMenu,
    cTable,
    cSearch,
    cTopHeader,
    cUser,
    cOss
  },
  // 数据
  data() {
    return {


      editableTabsValue: '2',
        editableTabs: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }],
        tabIndex: 2,



      echartsShow:false,
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
      rules: {},
      editFormVisible: false,
      viewConfig: {},
      tableData: {},
      myDialogTableData: [],
      topSecondTitle: '',
      searchConfig: {},
      menuConfig: {},
      Config: {},
      paginate: {},
      userShow: true,
      ossUpload: true,
      submitUrl: '',
      currentMenu: null,
      dialogImageUrl: '',
      dialogVisible: false,
      userInfo: {},
      
      formModel: {
        // name: '',
        // permission: ''
      },
      dialog: {
        label: '',
        dialogConfig: []
      }
    }
  },
  beforeMount() {
    // this.formModel =
  },
  // 方法
  methods: {


    // 添加标签
    addTab(targetName) {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      },

      //
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },

    calc_url(url){
      return process.env.NODE_ENV === 'development' ?'/api' + url: url
    },
    removeFile(file, item) {
      this.formModel[item.key] = this.formModel[item.key].replace(file.response + ',', '')
      this.formModel[item.key] = this.formModel[item.key].replace(file.response, '')
    },

    // 2024.5 新增 显示表单显示验证
    showVerfiy(item) {
      if (item.showVerfiy.func) {
        // 函数验证
        return item.showVerfiy.func()
      }
      else {
        return false
        //pass
      }
    },


    apiEvent(item){
      let { method, api } = item.url
      let params = ''
      let relPath = ''
      if(item.use_filter){
        params = this.get_filter_params(item.ignore_filter?item.ignore_filter:[])
      }
      if(item.use_page){
        let currentPage = type ? this.$refs.table.currentPage : 1
            console.log('this.$refs.table.currentPage', this.$refs.table.currentPage)
            let pageSize = this.$refs.table.pageSize
            relPath = '/' + currentPage + '/' + pageSize
      }      
      if(item.download){
        this.$downloadFile(method, api + relPath + params).then(res => {
          if(item.refrush_table){
            // 如果要求刷新则根据当前页面查询条件进行页面数据的刷新
            this.searchEvent(this.$refs.table.currentPage)
          }
        })
      }
      else {
        this.$http(method, api + relPath + params).then(res => {
          if(item.refrush_table){
            // 如果要求刷新则根据当前页面查询条件进行页面数据的刷新
            this.searchEvent(this.$refs.table.currentPage)
          }
        })
      }
    },

    successUpLoad(res, item) {
      console.log('this.formModel', this.formModel)
      if (!this.formModel[item.key] || this.formModel[item.key].length == 0) this.formModel[item.key] = ''
      if (res) {
        // 以下做法仅适用于当max 为1 的情况
        // if(this.formModel[item.key].split(',').length < item.max){
        //   this.formModel[item.key] = (this.formModel[item.key] ? this.formModel[item.key] + ',' : '') + res
        // }
        // else{
        //   this.formModel[item.key].split(',').pop()
        //   this.formModel[item.key] = (this.formModel[item.key] ? this.formModel[item.key] + ',' : '') + res
        // }
        this.formModel[item.key] = res
      }
      console.log('this.formModel', this.formModel)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    init(item, query_data={}) {
      if (!item) item = this.Config.view[0]
      else {
        this.currentMenu = item
      }
      this.topSecondTitle = item.name
      this.viewConfig = item.data.tableColumn

      for (const iterator of this.viewConfig.column) {
        if(iterator.type == 'select' && iterator.url && !iterator.data){
          this.$http(iterator.url.method, iterator.url.api).then(res => {
                let data = []
                for (const r of res.data) {
                  data.push({ value: r[iterator.url.map['name']], name: r[iterator.url.map['value']] })
                }
                this.$set(iterator, iterator.data, data)
                iterator.data = data
              })
        }
      }


      this.searchConfig = item.data.TopConfig

      // 跳转到其他页面传入的查询参数
      if(query_data){
        for (const key in query_data) {
          if (Object.prototype.hasOwnProperty.call(query_data, key)) {

            let value = query_data[key];

            for (const element of item.data.TopConfig.data) {
              if(element.key == key){
                element.query = value
                break
              }
              if(element.type == "input-group"){
                let res = element.value.find(item=>item.key == key)
                if(res){
                  res.query = value
                  break
                }
              }
            }
          }
        }
      }

      

      this.searchBtn = this.searchConfig.btn.filter(item => item.type == 'search')[0]
      let repath = item.data.url.api + '/1/' + item.data.url.pageSize
      
      if (item.data.url.restful) {
        repath += '/' + item.data.url.restful[0].value
      }

    
      let search_parmas = "?"

      // 这是查询固定参数, 即写在data.url 里面的固定参数
      if(item.data.url.params){
        for (const element of item.data.url.params) {
          search_parmas += `${element.key}=${element.value}&`
        }
      }

      for (const key in query_data) {
        if (Object.prototype.hasOwnProperty.call(query_data, key)) {
          search_parmas += `${key}=${query_data[key]}&`;
        }
      }

      repath += search_parmas

      this.$http(item.data.url.method, repath).then(res => {
        this.tableData = res.data
        this.paginate = res.paginate
      })
    },
    selectMenu(t, sysMenu, query_data) {
      if(query_data){
        this.query_data = query_data
      }
      if (t == false && sysMenu == 'user') {
        this.userShow = true
        this.topSecondTitle = '数据分析'
      } else {
        this.userShow = false
      }
      for (const iterator of this.Config.view) {
        if (iterator.tableName == t.tableName) {
          this.init(iterator, query_data=query_data)
          break
        }
      }
    },

    // 阿里云Oss 上传成功
    ossUpLoadSuccess(res) {
      this.ossUpload = true
      this.formModel["movieInfo"] = {
        requestUrl: res.res.requestUrls[0],
        fileName: res.name
      }
      console.log(this.formModel)
    },


    get_filter_params(ignore_filter=[]){
      // 获取查询参数, 注意不带分页条件, 理论上所有的分页都以/page/pageSize 来传递

      let queryData = {}
      let queryDataCopy = this.$refs.query.queryData

      let searchConfigDataCopy = []

      this.searchConfig.data.forEach(element => {
        if (element.key){
          searchConfigDataCopy.push(element)
        }
        else if(element.type=='input-group') searchConfigDataCopy.push(...element.value)
      });

      console.log("this.$refs.query.queryDatathis.$refs.query.queryData", this.$refs.query.queryData);
      
      for (const key in queryDataCopy) {
        for (const iterator of searchConfigDataCopy) {
          if (key == iterator.key && queryDataCopy[key] != iterator['default'] && queryDataCopy[key]) {
            queryData[key] = queryDataCopy[key]
          }
        }
      }

      let params = '?'
      for (const key in queryData) {
        if(ignore_filter.includes(key)){
          continue
        }
        params += `${key}=${queryData[key]}&`
      }
      console.log(`this.currentMenu=>${this.currentMenu}`)
      if(!this.currentMenu){
        this.currentMenu = this.Config.view[0]
      }
      // 查询固定参数，即使没有任何查询条件此固定参数依然生效
      if(this.currentMenu.data.url.params){
        let search_parmas = ""
        for (const element of this.currentMenu.data.url.params) {
          search_parmas += `${element.key}=${element.value}&`
        }
        params += search_parmas
      }
      
      console.log("paramsparamsparams", params);
      return params
    },

    searchEvent(type) {
      let { method, api } = this.searchBtn.url
      let currentPage = type ? this.$refs.table.currentPage : 1
      console.log('this.$refs.table.currentPage', this.$refs.table.currentPage)
      let pageSize = this.$refs.table.pageSize
      let relPath = '/' + currentPage + '/' + pageSize

    
      
      let params = this.get_filter_params()

      this.$http(method, api + relPath + params).then(res => {
        // console.log(res.data)
        this.tableData = res.data
        this.paginate = res.paginate
      })
    },
    change(item) {
      if(item["foreign_show"]){
        for (const element of item["foreign_show"]) {
          let target_key = element["target_key"]
          let params = []
         for (const t of  element['params_keys']) {
            params.push(this.formModel[t])
         }

         let result = this.dialog.dialogConfig.find(item => item.key === target_key);
          if (element['check'](...params)){
              result.isShow = true
          }
          else {
              result.isShow = false
              result.required = false
          }

        }
      }
      if(item["foreign_default_value"]){
        for (const element of item["foreign_default_value"]) {
          let target_key = element["target_key"]
          let params = []
         for (const t of  element['params_keys']) {
            params.push(this.formModel[t])
         }

         let result = this.dialog.dialogConfig.find(item => item.key === target_key);
          if (element['check'](...params)){
              result.type = element['type']
              this.formModel[target_key] = element['value']
          }
        }
      }
      this.$forceUpdate()
    },
    submitForm() {

      // 判断Oss上传成功
      if (this.ossUpload != true) {
        this.$message.warning("请等待视频上传完成")
        return false
      }

      let { method, api, path } = this.submitUrl
      console.log("this.submitUrl", this.submitUrl)
      let relPath = ''
      if (path)
        for (const iterator of path) {
          if (this.formModel[iterator.key] != undefined && this.formModel[iterator.key] != null) relPath += '/' + this.formModel[iterator.key]
        }

      // 验证表单 2024.5.20  新增

      this.$refs["formModel"].validate((valid) => {
        if (valid) {

          this.$http(method, api + relPath, this.formModel).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg)
              this.editFormVisible = false
              this.init(this.currentMenu)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },

    // 处理diolog的核心
    dialogEvent(type, item, row) {
      if (!item.ifDialog) { // 如果是按钮类型的小弹框, 直接走按钮处理时间
        return this.btnEvent(type, item, row)
      } else {  // 如果是表单类型的大弹框

        // 深拷贝dialog的配置, 以免在填写过程中的动态条件导致dialog的输入框变化
        this.dialog = cloneDeep(item);
        if (this.dialog.ifNewTable) {
          let { method, api, path } = item.url
          let relPath = ''
          if (path)
            for (const iterator of path) {
              if (row[iterator.key] != undefined) relPath += '/' + row[iterator.key]
            }
          this.$http(method, api + relPath, row).then(res => {
            if (res.code == 200) {
              this.init(this.currentMenu)
              if (!this.dialog.ifNewTable) {
                this.$message.success(res.msg)
              }
              this.myDialogTableData = res.data
              this.editFormVisible = true
            }
          })
        }
        else {

          // 检测是否有Oss上传, 有则开启上传成功监听
          let configDialogIteratorList = this.dialog.dialogConfig
          if (configDialogIteratorList.find(item => item.type == 'ossVideo')) this.ossUpload = false
          else this.ossUpload = true
          // 新增和修改都走这里
          this.formModel = {}
          this.rules = {}
          for (const iterator of this.dialog.dialogConfig) {
            if (type) this.$set(this.formModel, iterator.key, row[iterator.key]) // 修改
            else {
              this.$set(this.formModel, iterator.key, (iterator.default !== undefined && iterator.default !== '' && iterator.default !== NaN) ? iterator.default : '')
            } // 新增如果有默认值用默认值否则为空
            this.$set(this.rules, iterator.key, [{ required: iterator.required, message: '请输入' + iterator.label, trigger: 'blur' }])
          }
          console.log(this.rules)
          this.submitUrl = item.url
          for (const iterator of this.dialog.dialogConfig) {

            // 处理select的核心部分
            if (iterator.type == 'select' && iterator.url) {
              this.$http(iterator.url.method, iterator.url.api).then(res => {
                let data = []
                for (const r of res.data) {
                  data.push({ value: r[iterator.url.map['name']], name: r[iterator.url.map['value']] })
                }
                this.$set(iterator, iterator.data, data)
                iterator.data = data
              })
            }
          }
          this.editFormVisible = true

          this.$forceUpdate()
        }

      }
    },
    closeDialog() {
      this.editFormVisible = false
      this.dialog.ifNewTable = false
    },
    btnEvent(type, item, row) {
      console.log(type, item, row)
      this.$confirm('确认' + item.label + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let { method, api, path } = item.url

        let relPath = ''
        if (path)
          for (const iterator of path) {
            if (row[iterator.key] != undefined) relPath += '/' + row[iterator.key]
          }
        this.$http(method, api + relPath, row).then(res => {
          if (res.code == 200) {
            this.init(this.currentMenu)
            if (item.ifOpenNew) {
              console.log("row====>", row)

              const openWindowAsync = async () => {
                window.open( `${$devUrluser}/login-recog?signinfoID=${row.id}&userID=${localStorage.getItem("userID")}`);
              };
              // 调用异步函数
              openWindowAsync();
            }
            this.$message.success(res.msg)
          }
        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        }
        )
    }
  },

  // 侦听器
  watch: {
    /*  深度侦听
      Object: {
        handler: function(value){
          console.log(value)
        }
        // 一上来就触发侦听
        immediate: true
      }
      */
  },

  // 计算属性
  computed: {},

  // 创建后
  created() {
    console.log("localStorage.getItem('uP')", localStorage.getItem('uP'))
    this.menuConfig = sysMenu
    this.Config = sysConfig
    this.init(false)
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
  },

  // 组件挂载后
  mounted() {
    console.log('this.viewConfig', this.viewConfig)
  },

  // 组件销毁前
  beforeDestroy() { }
}
</script>

<style>
.el-upload--picture-card,
.el-upload-list--picture-card .el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
}
.el-upload--picture-card i {
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translateX(-50%) translateY(-50%);
}
.el-upload--picture-card {
  position: relative !important;
}
</style>

<style lang="css" scoped>

 

.Login {
  width: 100%;
  display: flex;
  height: 100vh;
}

.tac {
  width: 15%;
  height: 100%;
}
.main-table::-webkit-scrollbar {
  display: none;
}
</style>
